<template>
	<view>
		<!-- search头部搜索框 -->
		<view :style="{height:navbarHeight}">
			<u-navbar ref="navbars" :is-back="false" title=" "
				:background="{backgroundColor: '#3b89ff',height:navbarHeight,paddingTop:'70rpx'}"
				:border-bottom="false">
				<view class="u-f-ac u-f-jsb navbars">
					<view class="u-f-ajc u-f-column" @click="$u.route({type: 'back', delta: 1})">
						<image src="/static/jibei/home/back.png" style="height: 30rpx;"  mode="heightFix"></image>
					</view>
					<view style="margin: 0 30rpx;" class="u-f1">
						<u-search placeholder="搜索商品" :show-action="false" border-color="#eee" bg-color="#FFFFFF"
							disabled @click="$u.route(`/pagesN/goods/goods?cate=0`)"></u-search>
					</view>
					<view class="u-f-ac">
						<view class="u-f-ajc u-f-column" style="margin-right: 20rpx;"
							@click="$u.route('/pages/cart/cart')">
							<u-icon name="/static/images/tabbar/cart.ico" size="34" color="#ffffff"></u-icon>
							<view>购物车</view>
						</view>
						<!-- <view class="u-f-ajc u-f-column" @click="$u.route('/pages/shop/category')">
							<u-icon name="/static/images/tabbar/category.ico" size="34" color="#ffffff"></u-icon>
							<view>分类</view>
						</view> -->
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="container">
			<view class="bg-img-group">
				<image src="/static/images/home/nine1.png" mode="widthFix"></image>
			</view>
			<view class="image-flex-center">
				<image src="/static/images/home/nine2.png" mode="widthFix"></image>
			</view>
			<view class="bg-img-group">
				<image src="/static/images/home/nine31.png" mode="widthFix"></image>
				<view class="bg-img-box">
					<view class="bg-img-box-click" :key="index" v-for="(item,index) in navList" @click="jumpto(item.id)"></view>
				</view>
			</view>
		</view>
		<tabbars :current="0"></tabbars>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				navbarHeight: '184rpx',
				navList:[
					{name:'美妆',id:''},
					{name:'大件',id:''},
					{name:'服饰',id:''},
					{name:'家电',id:''},
					{name:'生活用品',id:''},
					{name:'轻奢精品',id:''}
				]
			};
		},
		onLoad: function() {
		},
		methods:{
			jumpto(path) {
				uni.navigateTo({
					url: path
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
	  height: 100%;
	  background-color: #f3f6fb;
	}
	.navbars {
		width: 100%;
		color: #FFFFFF;
		padding: 0 30rpx;
	
		view {
			font-size: 20rpx;
			color: #ffffff;
		}
	}
	.container {
		padding:30rpx;
		.bg-img-group{
			position: relative;
			image{
				width: 100%;
			}
		}
	}
	.image-flex-center{
		display: flex;
		justify-content: center;
		padding:20rpx 0;
		image{
			width: 70%;
		}
	}
	.bg-img-box{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		z-index: 10;
		.bg-img-box-click{
			width: 50%;
			height: 33.33%;
		}
	}
</style>
